<template>
  <div>
    <a-tabs
      v-model:activeKey="activeKey"
      tab-position="top"
      :tabBarGutter="130"
      @change="activeKeyChange"
      style="background-color: #fff;padding: 10px;height: 110vh"
    >
      <a-tab-pane key="1" tab="待付款">
        <a-table
          :data-source="data"
          :loading="waitPayLoading"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <a-table-column
            fixed="left"
            key="orderId"
            title="订单号"
            data-index="orderId"
          >
            <template #default="{ record }">
              <span style="font-weight: bold; font-size: 16px">{{
                record.orderId
              }}</span>
            </template>
          </a-table-column>
          <a-table-column
            key="createTime"
            title="倒计时"
            data-index="createTime"
          >
            <template #default="{ record }">
              <a-statistic-countdown
                :value="getDeadLine(record.timestamp)"
                format="mm:ss"
              />
            </template>
          </a-table-column>
          <a-table-column key="id" title="操作">
            <template #default="{ record }"
              ><a-button type="primary" ghost @click="toPay(record.orderId)"
                >立即付款</a-button
              >
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已付款">
        <a-table
          :data-source="orderData"
          :pagination="false"
          :scroll="{ y: 500 }"
          :loading="havePayLoading"
        >
          <a-table-column
            fixed="left"
            key="orderId"
            title="订单号"
            data-index="orderId"
          >
            <template #default="{ record }">
              <span style="font-weight: bold; font-size: 16px">{{
                record
              }}</span>
            </template>
          </a-table-column>

          <a-table-column key="id" title="操作">
            <template #default="{ record }"
              ><a-button type="primary" ghost @click="toOrderDetail(record)"
                >详情</a-button
              >
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getOrderIds, getHavePayOrderData } from "@/api/pay";
import { useUserStore } from "@/stores/user";
import router from "@/router";
import { getCartIds } from "@/api/ordercart";
import { message } from "ant-design-vue";
import { getGoodsIds } from "@/api/orderitem";

//转换倒计时方法
function getDeadLine(timeSecond) {
  const deadline = Date.now() + timeSecond * 1000;
  return deadline;
}
const userStore = useUserStore();
const activeKey = ref("1");
const data = ref([]);
onMounted(() => {
  getOrderId();
});

//获取待付款订单id
const waitPayLoading = ref(true);
function getOrderId() {
  setTimeout(() => {
    getOrderIds(userStore.user.key).then((res) => {
      if (res.code == 200) {
        data.value = res.data;
      }
    });
    waitPayLoading.value = false;
  }, 1000);
}

//监听标签页改变
function activeKeyChange(key) {
  switch (key) {
    case "1":
      getOrderId();
      break;
    case "2":
      getHavePayOrder();
      break;
    default:
      break;
  }
}

//获取已付款订单数据
const havePayLoading = ref(true);
const orderData = ref([]);
function getHavePayOrder() {
  setTimeout(() => {
    getHavePayOrderData(userStore.user.key).then((res) => {
      if (res.code === 200) {
        orderData.value = res.data;
      }
    });
    havePayLoading.value = false;
  }, 1000);
}

//跳往订单支付页
const cartIds = ref([]);
function toPay(orderId) {
  if (userStore.user.key) {
    getCartIds(orderId, userStore.user.key).then((res) => {
      if (res.code === 200) {
        cartIds.value = res.data;
        router.push({
          path: "submitorder",
          query: { id: cartIds.value, orderId: orderId },
        });
      } else {
        getOrderId();
      }
    });
  } else {
    message.success("请先登录哦");
    router.push("/login");
  }
}

//跳往已付款的订单页
const goodsIds = ref([]);
const addressId = ref(null);
function toOrderDetail(orderId) {
  if (userStore.user.key) {
    getGoodsIds(orderId, userStore.user.key).then((res) => {
      if (res.code === 200) {
        goodsIds.value = res.data.goodsData;
        addressId.value = res.data.addressId;
        router.push({
          path: "payfor",
          query: {
            id: goodsIds.value,
            orderId: orderId,
            addressId: addressId.value,
          },
        });
      }
    });
  } else {
    message.success("请先登录哦");
    router.push("/login");
  }
}
</script>
<style scoped>
</style>